<template>
  <div class="radar">
    <TitleColumn name="雷达图" />
    <div class="content">
      <div class="bg"></div>
      <img src="./radar2.png" alt="" />
    </div>
  </div>
</template>

<script lang="ts" setup>
import { reactive } from "vue";
import TitleColumn from "@/components/TitleColumn";

defineOptions({ name: "Radar" });

const a = 1;
const state = reactive({
  name: "vue3",
});
</script>

<style lang="less" rel="stylesheet/less" scoped>
.radar {
  width: 100%;
  height: 100%;
  .content {
    width: 100%;
    height: calc(100% - 24px);
    background: #02123433;
    backdrop-filter: blur(10px);
    position: relative;
    padding: 10px;
    .bg {
      position: absolute;
      z-index: 100;
      width: calc(100% - 20px);
      height: calc(100% - 20px);
      background: url(./mask.png) no-repeat;
      background-size: 100% 100%;
    }
    img {
      width: 100%;
      height: 100%;
    }
  }
}
</style>
